<template>
  <scroll-container>
    <!-- 标题 -->
    <div>
      <h6 class="margin-xs">
        <span>标题</span>
        <span class="text-color-gray text-size-sm">
          (component:{{ selectPageNodeDom[actionItem.selectItemKey].mpdConfig.component }})
        </span>
      </h6>
      <a-input v-model="selectPageNodeDom[actionItem.selectItemKey].title" placeholder="请输入标题" />
    </div>
    <!-- Text -->
    <div>
      <h6 class="margin-xs">
        <a-popover placement="left" :overlayStyle="{ maxWidth: '300px' }" :destroyTooltipOnHide="true">
          <mpd-icon class="cursor-pointer margin-r-xs" icon="mpd-icon-question" style="font-size: 14px"></mpd-icon>
          <template #content>
            <div style="word-wrap: break-word">
              【部分带有slot标签的组件支持】该输入框支持：${}，表达式取对应变量，原理是用计算属性computed实现的，所以要加this，比如：这是文字${this.mpdPageValue}
            </div>
          </template>
        </a-popover>
        <span>Text</span>
      </h6>
      <a-textarea
        v-model="selectPageNodeDom[actionItem.selectItemKey].mpdConfig.text"
        placeholder="放入标签的text内容"
        :rows="4"
      />
    </div>
    <!-- 自定义配置 -->
    <div class="margin-b-xs" v-for="(item, index2) in actionItem.base.general" :key="index2">
      <component-config :item="item" :actionItem="actionItem"></component-config>
    </div>
  </scroll-container>
</template>

<script>
import ComponentConfig from '../components/ComponentConfig.vue'

export default {
  components: {
    ComponentConfig
  },
  props: {
    actionItem: {
      type: Object,
      required: true
    }
  },
  inject: ['selectPageNodeDom']
}
</script>
